<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ userCount }}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ blogCount }}</div>
              <div>博客总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ typeCount }}</div>
              <div>分类数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ tagCount }}</div>
              <div>标签数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="mgb20">用户类型比例</h3>
        <div style="background-color: white">
          <ve-pie :data="consumerType" :theme="options"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">博客类型分布</h3>
        <div style="background-color: white">
          <ve-histogram :data="blogType"></ve-histogram>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="mgb20">博客分数比例</h3>
        <div style="background-color: white">
          <ve-pie :data="scoreBlog"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">热门作者分布</h3>
        <div style="background-color: white">
          <ve-histogram :data="author" :theme="options1"></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userCount: 0,
      blogCount: 0,
      tagCount: 0,
      typeCount: 0,
      consumer: [],
      consumerType: {
        //按类型分类的用户数
        columns: ["类型", "总数"],
        rows: [
          { 类型: "用户", 总数: 0 },
          { 类型: "作者", 总数: 0 },
        ],
      },
      options: {
        color: ["#87cefa", "#ffc0cb"],
      },
      options1: {
        color: ["yellow"],
      },
      blogType: {
        //按歌单风格分类
        columns: ["类型", "总数"],
        rows: [
          { 类型: "", 总数: 0 },
          { 类型: "", 总数: 0 },
          { 类型: "", 总数: 0 },
          { 类型: "", 总数: 0 },
          { 类型: "", 总数: 0 },
          { 类型: "", 总数: 0 },
          { 类型: "", 总数: 0 },
        ],
      },
      scoreBlog: {
        //按性别分类的歌手数
        columns: ["分数", "总数"],
        rows: [
          { 分数: "优", 总数: 0 },
          { 分数: "良", 总数: 0 },
          { 分数: "合格", 总数: 0 },
          { 分数: "差", 总数: 0 },
        ],
      },
      author: {
        columns: ["用户名", "关注量"],
        rows: [
          { 用户名: "", 关注量: 0 },
          { 用户名: "", 关注量: 0 },
          { 用户名: "", 关注量: 0 },
          { 用户名: "", 关注量: 0 },
          { 用户名: "", 关注量: 0 },
          { 用户名: "", 关注量: 0 },
          { 用户名: "", 关注量: 0 },
        ],
      },
    };
  },
  created() {
    this.getConsumer();
    this.getScoreBlog();
    this.getblogType();
    this.getBlogCount();
    this.getTagCount();
    this.getAuthorCount();
  },
  methods: {
    getConsumer() {
      //用户总数
      this.$get("user/0/100").then((res) => {
        if (res.code == 200) {
          this.consumer = res.data.records;
          this.userCount = this.consumer.length;
          this.consumerType.rows[0]["总数"] = this.setType(
            "用户",
            this.consumer
          );
          this.consumerType.rows[1]["总数"] = this.setType(
            "作者",
            this.consumer
          );
        }
      });
    },
    setType(type, val) {
      //根据类型获取用户数
      let count = 0;
      for (let item of val) {
        if (type == item.type) {
          count++;
        }
      }
      return count;
    },
    getBlogCount() {
      this.$get("list/0/100").then((res) => {
        if (res) {
          this.blogCount = res.data.total;
        }
      });
    },
    getScoreBlog() {
      this.$get("score").then((res) => {
        this.scoreBlog.rows[0]["总数"] = res.优;
        this.scoreBlog.rows[1]["总数"] = res.良;
        this.scoreBlog.rows[2]["总数"] = res.合格;
        this.scoreBlog.rows[3]["总数"] = res.差;
      });
    },

    getblogType() {
      this.$get("type/blog").then((res) => {
        let num = 1;
        for (var i = 0; i < res.length; i++) {
          num++;
          if (num > 8) {
            return;
          }
          this.blogType.rows[i].类型 = res[i].type_name;
          this.blogType.rows[i]["总数"] = res[i].COUNT;
          this.typeCount = res.length;
        }
      });
    },
    getAuthorCount() {
      this.$get("follow/hot").then((res) => {
        for (var i = 0; i < res.length; i++) {
          this.author.rows[i].用户名 = res[i].username;
          this.author.rows[i]["关注量"] = res[i].COUNT;
        }
      });
    },
    getTagCount() {
      this.$get("tag/0/100").then((res) => {
        if (res.code==200) {
          this.tagCount = res.data.records.length;
        }
      });
    },
  },
};
</script>

<style scoped>
.grid-content {
  display: flex;
  align-items: center;
  height: 50px;
}

.grid-cont-center {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: darkgray;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}
</style>